<meta title="店铺分类选择" width="800" args="multi:false,title"/>
<div class="p">
    <div class="clearfix">
        <ol class="breadcrumb pull-left" style="margin-bottom: 10px" s="tpl" id="breadcrumb" s-data="{}">
            <li class="file-dir" data-id="0"><a href="javascript:;">根分类</a></li>
            {%$.each(path_stack, function(i){%}
            <li class="file-dir" data-id="{%=this.id%}" data-idx="{%=i%}"><a href="javascript:;">{%=this.title%}</a></li>
            {%})%}
        </ol>
        <div class="pull-right">
            <form class="form-inline" id="form"
                  s="form"
                  s-form="{action: function() {$shopcatsGrid.refresh()}}">
                <input type="text" autocomplete="off" style="width: 200px;" s="" s-data="title" class="form-control input-sm" name="title" placeholder="输入名称查询" />
                <input type="submit" class="btn btn-default btn-sm" name="提交" />
            </form>
        </div>
    </div>
    <div id="shopcatsGrid"
         s='datac,nda,check'
         s-check="{multiple: multi}"
         s-data="Smart.cleanJsonRef(S.get('/api/shopcat/list/' + parentId, $form.node.serialize()))" style="height: 500px; overflow: auto">
        <table class="table table-striped table-hover table-bordered table-middle">
            <tr>
                <th>
                    <label class="s-checkbox">
                        <input autocomplete="off" type="checkbox" s-check-role="checkall-h"/>
                        <span class="s-checkbox-indicator"></span>
                    </label>
                </th>
                <th>图标</th>
                <th>ID</th>
                <th>分类名</th>
                <th>关键字</th>
                <th>查询方式</th>
                <th>淘宝类目ID</th>
                <th>状态</th>
                <th class="text-right">操作</th>
            </tr>
            <tbody s="loop">
            <tr s-loop-role="empty">
                <td colspan="9">暂无分类</td>
            </tr>
            <tr s-loop-role="row" s="datac" s-check-role="i" class="shopcat">
                <td>
                    <label class="s-checkbox">
                        <input autocomplete="off" type="checkbox" s-check-role="h" />
                        <span class="s-checkbox-indicator"></span>
                    </label>
                </td>
                <td s="tpl">
                    <img class="sorthandle" src="{%=this.iconUrl%}" style="max-width: 30px; max-height: 30px;"/>
                </td>
                <td name="id"></td>
                <td s="tpl">
                    <div ><span class="label label-info">{%=this.pathName%}</span></div>
                    <span name="title">{%=this.title%}</span>
                    {%if(this.ref) {%}
                    <label class="label label-warning" >{%=this.ref.title%}</label>
                    {%}%}
                </td>
                <td name="keyword"></td>
                <td s="tpl">
                    <span>
                        {%if(this.searchByKeyword){%}
                        关键字
                        {%} else {%}
                        类目ID
                        {%}%}
                    </span>
                </td>
                <td name="taobaoCatId"></td>
                <td s="tpl">
                    <span class="label {%=this.status=='ENABLED' ? 'label-success' : 'label-default'%}">{%=this.statusTitle%}</span>
                </td>
                <td class="text-right">
                    <input autocomplete="off" type="button" class="btn btn-xs btn-info" value="选择" s-click="select(this)"/>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">
    var parentId = 0;

    var path_stack = [];

    function add() {
        S.popupOpen("shopcat/shopcat-add.html", {parentId: parentId}).done(function (flag) {
            flag && $shopcatsGrid.refresh();
        })
    }

    S.meta.btns = [
        {
            name: "选择",
            style: "btn btn-primary",
            click: function() {
                var datas = $shopcatsGrid.getCheckedData();
                if (datas.length) {
                    S.close(datas, path_stack);
                } else {
                    S.toast("您还没有选择分类！", "warning");
                }
            }
        },
        {
            name: "关闭",
            style: "btn btn-default",
            click: function() {
                S.close();
            }
        }
    ]

    $shopcatsGrid.node.delegate(".shopcat", 'dblclick', function(e) {
        var node = $(e.currentTarget);
        var $node = Smart.of(node);
        var data = $node.data();
        loadShopcat(data.id);
        path_stack.push(data);
        $breadcrumb.refresh();
    })

    $breadcrumb.node.delegate('.file-dir', 'click', function(e) {
        var node = $(e.currentTarget);
        var idx = parseInt(node.attr("data-idx"));
        var id = node.attr("data-id");
        if(id == parentId) {
            return;
        }
        if(id == 0) {
            path_stack = [];
        } else {
            path_stack = path_stack.slice(0, idx + 1);
        }
        loadShopcat(id);
        $breadcrumb.refresh();
    })

    function loadShopcat(pid) {
        parentId = pid;
        $shopcatsGrid.refresh();
    }

    function select($this) {
        var data = $this.parent().data();
        S.close([data], path_stack)
    }

    $shopcatsGrid.node.find("tbody").sortable({
        handle: ".sorthandle"
    });
</script>